<template>
<div style="padding: 2% 3%;">

  <el-row>
    <el-button-group>
      <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
      <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>
      <el-button v-if="value||toggleShow" type="success" :size='size' @click="save" >保存</el-button>
      <el-button  type="success" :size='size' @click="uplod" >上传</el-button>
      <!-- 修改下拉框 -->
    </el-button-group>
    <el-dialog title="上传文件" :visible.sync="dialogVisible" width="31%" >
          <el-form :model="form" :rules="rules" ref="form1" label-width="100px" >
            <el-form-item class=""  label="">
              <el-upload :auto-upload="false" :file-list="uploadlist"	  ref="upload" :limit="limitNum"    drag action="qwer" :before-upload="beforeupload" :on-change="fileChange">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
              </el-upload>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="qx">取 消</el-button>
            <el-button type="primary" @click="save1" :disabled="saveBtnDisable">保存</el-button>
          </span>
     </el-dialog>
    <template v-if="!toggleShow" >
      <el-select style="margin-left: 1.25rem;" @change="editChange"  :size="size" v-model="value" placeholder="请选择金融公司名称" >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </template>
    <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>
  </el-row>


  <!-- 新增 -->
  <el-row v-if="toggleShow" >
     <el-divider></el-divider>
     <!-- 改成行类表单  :inline="true"  -->
    <el-form ref="form1"  :inline="true" :rules="rules" :model="form" label-width="120px" >
        <el-form-item label="金融公司名称" prop="name" >
          <el-input clearable v-model="form.name"></el-input>
        </el-form-item>

        <!-- 用br换行 或者div  -->
         <br />
        <div style="margin-top: 1.5rem;" >
        <el-form-item label="金融返利点数" prop="monkeyBackMoney">
          <el-input-number  :size="size" style="width:100%;" controls-position="right" :precision="2" :step="0.1" :min="0" v-model="form.monkeyBackMoney">
          </el-input-number>
        </el-form-item>

        </div>

         <br />
        <div  >


        </div>

    </el-form>
    <el-divider></el-divider>
  </el-row>


   <!-- 修改 -->
  <el-row v-if="!toggleShow">
     <el-divider></el-divider>
    <span v-if="!value">请选择金融公司名称</span>
    <!-- 根据下拉框是否有值 显示 -->
    <div v-if="value">
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px" >
          <el-form-item label="金融公司名称" prop="name" >
            <el-input clearable v-model="form.name"></el-input>
          </el-form-item>
           <br />
          <div style="margin-top: 1.5rem;" >
          <el-form-item label="金融返利点数" prop="monkeyBackMoney">
            <el-input-number  :size="size" style="width:100%;" controls-position="right" :precision="2" :step="0.1" :min="0" v-model="form.monkeyBackMoney">
            </el-input-number>
          </el-form-item>
          </div>

           <br />
          <div  >


          </div>
      </el-form>
      <el-divider></el-divider>
    </div>
  </el-row>


</div>
</template>

<script>
  export default{
    data() {
      return {
        dialogVisible: false,
        form1: {
        },
        param: {
          file: '',
        },
        saveBtnDisable: false,
        file2:null,
        limitNum: 1,  // 上传excell时，同时允许上传的最大数
        fileList:[],
        uploadlist:[],
        
       size:'medium',

       //切换新增修改显示
       toggleShow:true,

       form:{
         name:'',
         monkeyBackMoney:0
       },
       //修改下拉框的值
       options:{ },
       //修改下拉框选择之后存的值
       value:'',
       rules:{
         name:[{ required: true, message: '请填写金融公司名称', trigger: 'blur' }],
         monkeyBackMoney:[{ required: true, message: '请填写返利点', trigger: 'blur' }],
       }
      }
    },
    methods:{
      /* ------------上传文件---------- */
      beforeupload(file) {
        this.param.file = file
        /* console.log(this.param) */
        return false;
      },
      fileChange(file, oldFile) {
        let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
        oldFile = [];
        if (fileType !== 'xlsx' && fileType !== 'xls' ) {
          this.$message.error("文件上传格式不正确");
          return false;
        }
        if (file.size / 1024 / 1024 > 1.5) {
          this.$message.error("文件大小不能超过2M");
          return false;
        }
        this.file = file.raw;
      },
      
      uplod(){
       /* this.$ajax.post("Excel2/twocompanyIn",{}).then(res =>{
      
        }) */
        this.param = {};
        emptyObj(this.form);
        this.$emit('show-dialog', this.form);
        this.dialogVisible = true;
      },
      qx(){
        /* console.log(this.$refs.upload); */
        this.dialogVisible=false
        this.$refs.upload.clearFiles()
      
        this.param.file = ''
        this.fileList = []
      },
      save1(){
        this.$refs.form1.validate(valid => {
          console.log(valid);
          console.log("啦啦啦");
          console.log(this.param.file);
          if (valid) {
            this.$ajax.post("Excel/newCarIn",{'inFile':this.param.file}).then(res=>{
                  console.log("上传成功");
                  this.dialogVisible=false
                  this.param.file = ''
                  this.fileList = []
                  this.$refs.upload.clearFiles()
                }).catch(error => {
                  this.$refs.upload.clearFiles()
                  this.dialogVisible=false
                  this.$notify({
                    title: '提示',
                    message: '上传模板错误',
                    type: 'warning',
                    position: 'bottom-right'
                  });
                 /* console.log("上传模板错误"); */
              })
          }
      
        })
      },
       /* ---------上传文件----------- */
      
      

      //切换v-if
      addShow(){

        this.toggleShow=true
         emptyObj(this.form)
         console.log(this.form);
         this.value='';
      },
      editShow(){
        this.value='';
        this.toggleShow=false
         emptyObj(this.form)
         this.editOptions();

      },

       //查找修改下拉框的值赋给options
      editOptions(){
        this.$ajax.post("moneycompany2/list",{}).then(res=>{
          var result = res.data;
          if(result.success){
            this.options=result.data
          }
        })
      },

      //保存
      save(){
        this.$refs.form1.validate(valid=>{
          if(valid){

            this.$ajax.post("moneycompany2/save",this.form).then(res=>{
              var result = res.data;
              if(result.success){
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value='';
              }else{
                this.$notify({
                  title: '提示',
                  message: result.msg,
                  type: 'warning',
                  position: 'bottom-right'
                });
              }
            })

          }
        })
      },

    //选择下拉框
    editChange(){
      this.$ajax.post("moneycompany2/findbyId",{id:this.value}).then(res=>{
          var result = res.data;
          if(result.success){
            this.form=result.data;
            this.$set(this.form,"name",result.data.money.name)
            this.$set(this.form,"id",result.data.moneyId)
          }
      })
    },

    //点击下拉框×
    qingkong(){
      this.value='';
    }


    }
  }


  function emptyObj(obj){

    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
